<template>
    <div class="commoninfo">
        <!-- <Card> -->
        <Form ref="formData" :model="formData" :label-width="140" disabled>
            <Card>
                <div class="common_br">
                    <h2 class="common_title">
                        <span>基本信息</span>
                        <span class="common_title_more">
                        <span>{{this.contractNo}}</span>
                        </span>
                    </h2>
                    <div class="common_content">
                        <Row>
                            <Col v-if="!isMainPerson" :xs="24" :md="12" :lg="8">
                                <FormItem label="与主借人关系" prop="custRelation">
                                    <Select v-model="formData.custRelation" placeholder="请选择" class="w200">
                                        <Option :value="item.value" v-for="(item,index) in dataDict.custRelationDict"
                                                :key="index">{{item.title}}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col :xs="24" :md="12" :lg="8">
                                <FormItem label="客户姓名" prop="custName">
                                    <Input v-model="formData.custName" maxlength="32" class="w200" @on-change="spell()"
                                           placeholder="请输入"/>
                                </FormItem>
                            </Col>
                            <Col :xs="24" :md="12" :lg="8">
                                <FormItem label="拼音/英文" prop="spellName">
                                    <Input v-model="formData.spellName" class="w200" maxlength="25" placeholder="请输入"/>
                                </FormItem>
                            </Col>
                            <Col v-if="isMainPerson" :xs="24" :md="12" :lg="8">
                                <FormItem label="手机号" prop="telPhone">
                                    <Input v-model="formData.phone" maxlength="11" class="w200" placeholder="请输入"/>
                                </FormItem>
                            </Col>
                            <Col v-if="isMainPerson" :xs="24" :md="12" :lg="8">
                                <FormItem label="其他联系方式" prop="otherPhone">
                                    <Input v-model="formData.otherPhone" class="w200" maxlength="11" placeholder="请输入"/>
                                </FormItem>
                            </Col>
                            <Col v-if="isMainPerson" :xs="24" :md="12" :lg="8">
                                <FormItem label="家庭联系方式" prop="homePhone">
                                    <Input v-model="formData.homePhone" class="w200" maxlength="11" placeholder="请输入"/>
                                </FormItem>
                            </Col>
<!--                             </Row> -->
                            <!-- <Row> -->
                            <Col :xs="24" :md="12" :lg="8">
                                <FormItem label="证件类型" prop="certType">
                                    <Select v-model="formData.certType" placeholder="请选择" class="w200">
                                        <Option :value="item.value" v-for="(item,index) in dataDict.certTypeDict"
                                                :key="index">{{item.title}}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col :xs="24" :md="12" :lg="8">
                                <FormItem label="证件号码" prop="certNo">
                                    <Input v-model="formData.certNo" maxlength="32" class="w200" placeholder="请输入"/>
                                </FormItem>
                            </Col>
                            <Col :xs="24" :md="12" :lg="8" class="pr">
                                <FormItem label="证件到期日" prop="certEndDate">
                                    <DatePicker type="date" class="w200" v-model="formData.certEndDate"
                                                placeholder="空值"></DatePicker>
                                    <Checkbox v-model="single" disabled>长期</Checkbox>
                                </FormItem>

                            </Col>
                            <!-- </Row> -->
                            <!-- <Row> -->
                            <Col :xs="24" :md="12" :lg="8">
                                <FormItem label="出生日期" prop="birthday">
                                    <DatePicker
                                        type="date"
                                        class="w200"
                                        v-model="formData.birthday"
                                        placeholder="请选择"
                                        @on-change="countAge(formData.birthday)"
                                    ></DatePicker>
                                </FormItem>
                            </Col>
                            <Col :xs="24" :md="12" :lg="8">
                                <FormItem label="婚姻状况" prop="maritalStatus">
                                    <Select v-model="formData.maritalStatus" placeholder="请选择婚姻状况" class="w200">
                                        <Option :value="item.value" v-for="(item,index) in dataDict.maritalStatusDict"
                                                :key="index">{{item.title}}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <!-- </Row> -->
                            <!-- <Row> -->
                            <Col :xs="24" :md="12" :lg="8">
                                <FormItem label="性别" prop="sex">
                                    <Select v-model="formData.sex" placeholder="请选择性别" class="w200">
                                        <Option :value="item.value" v-for="(item,index) in dataDict.sexDict"
                                                :key="index">{{item.title}}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col :xs="24" :md="12" :lg="8">
                                <FormItem label="国籍" prop="nationality">
                                    <Select v-model="formData.nationality" placeholder="请选择国籍" class="w200">
                                        <Option :value="item.value" v-for="(item,index) in dataDict.nationalityDict"
                                                :key="index">{{item.title}}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <!--                            <Col  :xs="24" :md="12" :lg="8">-->
                            <!--                                <FormItem label="工作年限" prop="workAge">-->
                            <!--                                    <Input v-model="formData.workAge" class="w200" placeholder="请输入" type="number"/>-->
                            <!--                                </FormItem>-->
                            <!--                            </Col>-->
                            <!-- </Row> -->
                            <!-- <Row> -->
                            <Col :xs="24" :md="12" :lg="8">
                                <FormItem label="学历" prop="highestEducation">
                                    <Select v-model="formData.highestEducation" placeholder="请选择国籍" class="w200">
                                        <Option :value="item.value"
                                                v-for="(item,index) in dataDict.highestEducationDict"
                                                :key="index">{{item.title}}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col v-if="!isMainPerson" :xs="24" :md="12" :lg="8">
                                <FormItem label="手机号码" prop="telPhone">
                                    <Input v-model="formData.phone" class="w200" maxlength="11" placeholder="请输入"/>
                                </FormItem>
                            </Col>
                            <Col v-if="!isMainPerson" :xs="24" :md="12" :lg="8">
                                <FormItem label="其他联系方式" prop="otherPhone">
                                    <Input v-model="formData.otherPhone" class="w200" maxlength="11" placeholder="请输入"/>
                                </FormItem>
                            </Col>
                            <Col v-if="!isMainPerson" :xs="24" :md="12" :lg="8">
                                <FormItem label="家庭联系方式" prop="homePhone">
                                    <Input v-model="formData.homePhone" class="w200" maxlength="11" placeholder="请输入"/>
                                </FormItem>
                            </Col>
                        </Row>
                    </div>
                </div>
            </Card>
            <Card>
                <div class="common_br" v-if="isMainPerson">
                    <h2 class="common_title">其他信息</h2>
                    <div class="common_content">
                        <Row>
                            <Col :xs="24" :md="12" :lg="8">
                                <FormItem label="驾驶证件" prop="drivingType">
                                    <Select v-model="formData.drivingType" placeholder="请选择行业类型" class="w200">
                                        <Option :value="item.value" v-for="(item,index) in dataDict.drivingTypeDict"
                                                :key="index">{{item.title}}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col :xs="24" :md="12" :lg="8">
                                <FormItem label="驾驶证档案编号" prop="drivingNo">
                                    <Input v-model="formData.drivingNo" maxlength="128" class="w200" placeholder="请输入"/>
                                </FormItem>
                            </Col>
                        </Row>
                    </div>
                </div>
            </Card>
            <Card>
                <div class="common_br">
                    <h2 class="common_title">工作信息</h2>
                    <div class="common_content">
                        <Row>
                            <Col :xs="24" :md="12" :lg="8">
                                <FormItem label="单位名称" prop="unitName">
                                    <Input v-model="formData.unitName" maxlength="128" class="w200" placeholder="请输入"/>
                                </FormItem>
                            </Col>
                            <Col :xs="24" :md="12" :lg="8">
                                <FormItem label="单位性质" prop="unitType">
                                    <Select v-model="formData.unitType" placeholder="请选择单位性质" class="w200">
                                        <Option :value="item.value" v-for="(item,index) in dataDict.unitTypeDict"
                                                :key="index">{{item.title}}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col :xs="24" :md="12" :lg="8">
                                <FormItem label="行业类型" prop="industryType">
                                    <Select v-model="formData.industryType" placeholder="请选择行业类型" class="w200">
                                        <Option :value="item.value" v-for="(item,index) in dataDict.industryTypeDict"
                                                :key="index">{{item.title}}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <!-- </Row> -->
                            <!-- <Row> -->
                            <Col :xs="24" :md="12" :lg="8">
                                <FormItem label="职业类型" prop="professionalType">
                                    <Select v-model="formData.professionalType" placeholder="请选择职业类型" class="w200">
                                        <Option :value="item.value"
                                                v-for="(item,index) in dataDict.jobsTypeDict"
                                                :key="index">{{item.title}}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col :xs="24" :md="12" :lg="8">
                                <FormItem label="职务" prop="position">
                                    <Select v-model="formData.position" placeholder="请选择职务" class="w200">
                                        <Option :value="item.value" v-for="(item,index) in dataDict.positionDict"
                                                :key="index">{{item.title}}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col :xs="24" :md="12" :lg="8">
                                <FormItem label="公司电话" prop="contactNo">
                                    <Input v-model="formData.contactNo" maxlength="20" class="w200"
                                           placeholder="请输入"/>
                                </FormItem>
                            </Col>
                            <!-- </Row> -->
                            <!-- <Row> -->
                            <Col :xs="24" :md="12" :lg="8">
                                <FormItem label="本人月收入" prop="monthlyIncome">
                                    <Input v-model="formData.monthlyIncome" maxlength="18" class="w200"
                                           placeholder="请输入"/>
                                </FormItem>
                            </Col>
                            <!--                            <Col :xs="24" :md="12" :lg="8">-->
                            <!--                                <FormItem label="家庭总收入" prop="otherIncome">-->
                            <!--                                    <Input v-model="formData.otherIncome" maxlength="18" class="w200"-->
                            <!--                                           placeholder="请输入"/>-->
                            <!--                                </FormItem>-->
                            <!--                            </Col>-->
                            <Col :xs="24" :md="12" :lg="8">
                                <FormItem label="未结清贷款" prop="unclearedLoan">
                                    <Input v-model="formData.unclearedLoan" maxlength="18" class="w200"
                                           placeholder="请输入"/>
                                </FormItem>
                            </Col>
                            <Col v-if="isMainPerson" :xs="24" :md="12" :lg="8">
                                <FormItem label="工作年限" prop="workAge">
                                    <Input v-model="formData.workAge" class="w200" placeholder="请输入" type="number"/>
                                </FormItem>
                            </Col>
                        </Row>
                    </div>
                </div>
            </Card>
            <Card>
                <div class="common_br">
                    <h2 class="common_title">地址信息</h2>
                    <div class="common_content">
                        <div>
                            <row>
                                <Col :xs="36" :md="24" :lg="8">
                                    <FormItem label="房产类型" prop="houseType">
                                        <Select v-model="formData.houseType" placeholder="请选择房产类型" class="w200">
                                            <Option :value="item.value"
                                                    v-for="(item,index) in dataDict.houseTypeDict"
                                                    :key="index">{{item.title}}
                                            </Option>
                                        </Select>
                                    </FormItem>
                                </Col>
                                <Col :xs="36" :md="24" :lg="8">
                                    <FormItem label="房产起始时间" prop="houseStartDate">
                                        <Input v-model="formData.houseStartDate" maxlength="240" class="w200"
                                               placeholder="请输入"/>
                                    </FormItem>
                                </Col>
                            </row>
                            <div v-for="(item,index) in formData.addressinfo" :key="index">
                                <Row>
                                    <Col :xs="24" :md="12" :lg="8">

                                        <FormItem label="地址类型">
                                            <Select v-model="item.addressType" placeholder="请选择地址类型" class="w200">
                                                <Option :value="item.value"
                                                        v-for="(item,index) in dataDict.addressTypeDict"
                                                        :key="index">{{item.title}}
                                                </Option>
                                            </Select>
                                        </FormItem>
                                    </Col>
                                    <Col span="10">
                                        <PlaceCascade
                                            label="详细地址"
                                            value="workAddress"
                                            detailValue="address"
                                            :form="item"
                                            :isDetailAddress="true"
                                            :isDisabled="false"
                                            :location="initLoadData"
                                        />
                                    </Col>
                                </Row>
                            </div>
                        </div>
                    </div>
                </div>
            </Card>
            <Card>
                <div class="common_br" v-if="isMainPerson">
                    <h2 class="common_title">紧急联系人信息</h2>
                    <div class="common_content emerContact">
                        <div v-for="(item,index) in emerContactForm" class="contactinfo" :key="index">
                            <Row>
                                <Col :xs="24" :md="12" :lg="8">
                                    <FormItem label="与主借人关系">
                                        <Select v-model="item.custRelation" placeholder="请选择" class="w200">
                                            <Option :value="item.value"
                                                    v-for="(item,index) in dataDict.custRelationDict"
                                                    :key="index">{{item.title}}
                                            </Option>
                                        </Select>
                                    </FormItem>
                                </Col>
                                <Col :xs="24" :md="12" :lg="8">
                                    <FormItem label="姓名">
                                        <Input v-model="item.custName" maxlength="32" class="w200" placeholder="请输入"/>
                                    </FormItem>
                                </Col>
                                <Col :xs="24" :md="12" :lg="8">
                                    <FormItem label="手机号">
                                        <Input v-model="item.telPhone" maxlength="32" class="w200" placeholder="请输入"/>
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row>
                                <Col :xs="24" :md="12" :lg="8">
                                    <FormItem label="证件类型">
                                        <Select v-model="item.certType" placeholder="请选择" class="w200">
                                            <Option :value="item.value" v-for="(item,index) in dataDict.certTypeDict"
                                                    :key="index">{{item.title}}
                                            </Option>
                                        </Select>
                                    </FormItem>
                                </Col>
                                <Col :xs="24" :md="12" :lg="8">
                                    <FormItem label="证件号码">
                                        <Input v-model="item.certNo" maxlength="32" class="w200" placeholder="请输入"/>
                                    </FormItem>
                                </Col>
                                <Col :xs="24" :md="12" :lg="8">
                                    <FormItem label="公司名称">
                                        <Input v-model="item.companyName" maxlength="128" class="w200"
                                               placeholder="请输入"/>
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row>
                                <Col :xs="24" :md="12" :lg="8">
                                    <FormItem label="月收入">
                                        <Input v-model="item.monthlyIncome" class="w200" placeholder="请输入"
                                               :index="index" maxlength="18"/>
                                    </FormItem>
                                </Col>
                                <Col span="24">
                                    <PlaceCascade
                                        label="详细地址"
                                        value="livingAddress"
                                        detailValue="detailAddress"
                                        :form="item"
                                        :isDetailAddress="true"
                                        :isDisabled="false"
                                        :location="initLoadData"
                                    />
                                </Col>
                            </Row>
                        </div>
                    </div>
                </div>
            </Card>
        </Form>
        <!-- </Card> -->
    </div>
</template>
<script>
    import PlaceCascade from "_p/basic/pages/contract/common/PlaceCascade";
    import {getDictDataList} from "_p/basic/assets/contract/js/utils";
    import {getLocation} from "_p/basic/api/contract/common/common";
    import {
        custAddressInfoList,
        custBaseInfo,
        custContactInfoList,
        custContactsInfoList,
        custDetailInfo
    } from "_p/basic/api/contract/contract-detail-inquiry";

    export default {
        name: "comoninfo",
        components: {
            PlaceCascade
        },
        data() {
            return {
                isMainPerson: true, // 是否是主借人 默认true
                loading: false,
                setIsDefaultName: "设为邮寄地址",
                id: "", //编辑的时候修改id
                location: [],
                formModel: this.model,
                totalLevel: 2,
                single: false,
                switch1: false,
                initLoadData: [],
                dataDict: {},
                dicttArr: [
                    "certType",
                    "maritalStatus",
                    "sex",
                    "highestEducation",
                    "nationality",
                    "drivingType",
                    "unitType",
                    "industryType",
                    "jobsType",
                    "position",
                    "addressType",
                    "houseType",
                    "custRelation"
                ],
                formData: {
                    id: "",
                    houseType: "",
                    houseStartDate: "",
                    personalInfoId: "",
                    personalAddressId: "",
                    permanentAdreess: [],
                    custRelation: "",
                    custName: "",
                    spellName: "",
                    custType: "",
                    certType: "00001",
                    certNo: "",
                    otherPhone: '',
                    homePhone: '',
                    birthday: "",
                    certEndDate: "",
                    certEndDateTemp: null,
                    certEndDateTempTwo: "",
                    isLongTerm: false,
                    domicLocation: [],
                    maritalStatus: "",
                    sex: "",
                    age: "",
                    nationality: "1",
                    workAge: "",
                    highestEducation: "",
                    telPhone: "",
                    familyNumbers: "",
                    unitType: "",
                    unitName: "",
                    industryType: "",
                    drivingType: "",
                    professionalType: "",
                    position: "",
                    companyPhone: "",
                    monthlyIncome: "",
                    otherIncome: "",
                    unclearedLoan: "",
                    contactNo: "",
                    // 地址信息
                    addressinfo: [
                        {
                            address: "",
                            addressType: "",
                            city: "",
                            workAddress: [],
                            createBy: "",
                            createTime: "",
                            custNo: "",
                            delFlag: "",
                            id: "",
                            province: "",
                            updateBy: "",
                            updateTime: "",
                        }
                    ]
                },
                requireCertEndDate: [
                    {
                        required: true,
                        message: "证件到期日不能为空",
                        trigger: "change",
                        type: "date"
                    }
                ],
                clearCertEndDate: [],
                // 紧急联系人
                emerContactForm: {
                    contactinfo: [
                        {
                            livingAddress: [],
                            certNo: "",
                            certType: "",
                            companyName: "",
                            companyPhone: "",
                            contactNo: "",
                            contractNo: "",
                            createBy: "",
                            createTime: "",
                            custName: "",
                            custRelation: "",
                            delFlag: "",
                            detailAddress: "",
                            id: "",
                            livingCity: "",
                            livingProvince: "",
                            monthlyIncome: "",
                            telPhone: "",
                        }
                    ]
                }
            };
        },

        created() {
            this.getParams();
            // this.isSP = channelType(this.$route.meta.params);
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                this.getDictDataList();
                this.getDetial();
                this.getInitData();
            },
            getInitData() {
                let param = {
                    level: "1",
                    upperCode: "1"
                };
                getLocation(param).then(res => {
                    if (res.code == "0000") {
                        res.data.forEach(item => {
                            // 表明是否是父节点
                            if (item.isParent) {
                                item.loading = false;
                                item.children = [];
                            }
                        });
                    }
                    this.initLoadData.push(...res.data);
                });
            },
            loadData(item, callback) {
                item.loading = true;
                getLocation({upperCode: item.value}).then(res => {
                    if (res.code === "0000") {
                        res.data.forEach(function (item) {
                            if (item.isParent) {
                                item.loading = false;
                                item.children = [];
                            }
                        });
                        item.children = res.data;
                        item.loading = false;
                        callback();
                    }
                });
            },
            // 获取页面数据
            getParams() {
                const pageParams = this.afs.getPageParams(this);
                console.log("页面初始数据------:", pageParams);

                this.pageParams = pageParams;
                this.contractNo = pageParams.contractNo;
                this.contractNo = pageParams.contractNo;
                if (pageParams.roleType === "主借人") {
                    this.custRole = "MAIN_PERSON";
                } else if (pageParams.roleType === "共借人") {
                    this.custRole = "JOINT_PERSON";
                } else if (pageParams.roleType === "担保人") {
                    this.custRole = "GUARANTEE_PERSON";
                }
                // 判断角色类型
                if (this.custRole !== "MAIN_PERSON") this.isMainPerson = false;
            },
            // 请求数据
            getDetial() {
                let p1 = custBaseInfo(this.contractNo, this.custRole), // 基本信息
                    p2 = custDetailInfo(this.contractNo, this.custRole), // 详细信息
                    p3 = custAddressInfoList(this.contractNo, this.custRole), // 地址信息
                    p4 = custContactInfoList(this.contractNo, this.custRole), // 联系电话信息
                    p5;
                if (this.isMainPerson) p5 = custContactsInfoList(this.contractNo); // 紧急联系人信息
                Promise.all([p1, p2, p3, p4, p5]).then(values => {

                    let data = {};
                    values.forEach((e, i) => {
                        if (e && e.code === "0000" && e.data) {
                            if (i === 2) {
                                e.data.forEach((e, i) => {
                                    e.workAddress = [e.province, e.city]
                                });
                                data = Object.assign({}, data, {addressinfo: e.data});
                                this.formData.houseType = data.addressinfo[1].houseType
                                this.formData.houseStartDate = data.addressinfo[1].houseStartDate
                            } else if (i === 4) {
                                this.emerContactForm = e.data

                                e.data.forEach((e, i) => {
                                    e.livingAddress = [e.livingProvince, e.livingCity]
                                });
                            } else {
                                data = Object.assign({}, data, e.data);
                            }
                        }
                    });
                    if (data.certEndDate === "9999-12-31 00:00:00") {
                        this.single = true,
                            data.certEndDate = this.formData.certEndDateTemp
                    }
                    if (data.certEndDate === undefined) {
                        data.certEndDate = this.formData.certEndDateTempTwo
                    }

                    if (data[0] !== null && data[0] !== undefined) {
                        this.formData.contactNo = data[0].contactNo
                        this.formData.otherPhone = data[0].otherPhone
                        this.formData.homePhone = data[0].homePhone
                    }
                    this.formData = Object.assign({}, this.formData, data);

                });
            },
            // 数据字典
            getDictDataList() {
                getDictDataList(this.dicttArr).then(res => {
                    console.log("数据字典------:", res);
                    this.dataDict = res;
                });
            },
            //关闭页面
            back() {
                this.afs.closeTab(this);
            }
        }
    };
</script>

<style lang="less">
    @import "../../../../../../styles/common/form.less";

    .common_title_more {
        padding-left: 10px;
        font-size: 12px;

        span {
            padding-left: 10px;
        }
    }
</style>
